import React, { Component } from 'react'
import { Grid, Container, Segment } from 'semantic-ui-react'
import BusiCrumb from './UI/BusiCrumb';

import ReactMapboxGl from "react-mapbox-gl";

class MapboxPanel extends Component{
  constructor() {
        super();
        this.state = {
            style : {
                version: 8,
                sources: {
                  osm: {
                    type: 'raster',
                    tiles: ['http://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
                    tileSize: 256
                  }
                },
                layers: [
                  {
                    id: 'osmTiles',
                    type: 'raster',
                    source: 'osm',
                    minzoom: 0,
                    maxzoom: 19
                  }
                ]
            },
            bearing: [-60],
            pitch: [60],
            center: [-0.0824952, 51.5144951],
            paintLayer: {
                'fill-extrusion-color': '#aaa',
                'fill-extrusion-height': {
                  type: 'identity',
                  property: 'height'
                },
                'fill-extrusion-base': {
                  type: 'identity',
                  property: 'min_height'
                },
                'fill-extrusion-opacity': 0.6
              }
        }
    }

    render() {
        const Map = ReactMapboxGl({
            accessToken:
              "pk.eyJ1IjoiZmFrZXVzZXJnaXRodWIiLCJhIjoiY2pwOGlneGI4MDNnaDN1c2J0eW5zb2ZiNyJ9.mALv0tCpbYUPtzT7YysA2g"
        });
        
        return (
            <Segment vertical style={{ margin: "4em 0em 0em", padding: "2em 0em" }}>
                <Container textAlign="center">
                    <Grid divided inverted stackable >
                        <Grid.Row>
                            <BusiCrumb></BusiCrumb>
                        </Grid.Row>
                        <Grid.Row>
                            <Grid.Column>
                                <Map style={ this.state.style } // eslint-disable-line
                                    bearing = {this.state.bearing } pitch={ this.state.pitch } center={this.state.center} 
                                    containerStyle={{ height: "500px", width: "100%"}}>
                                </Map>                                                 
                            </Grid.Column>
                        </Grid.Row>
                    </Grid>
                </Container>
            </Segment>
        );
    }
}

export default MapboxPanel;